<template>
	<view class="resumeItem" @click="toDetail">
		<view class="resmueInfo">
			<view class="resumeInner" :style="{paddingBottom: item.intention_jobs!='' || item.intention_district != '' ? '24rpx' : '40rpx'}">
				<image v-if="item.high_quality == 1" class="highquality" src="../../static/img/index/highquality.png"></image>
				<image v-if="item.stick == 1" class="stick" src="../../static/img/stick.png"></image>
				<view :class="nameClass">{{item.fullname}}<text v-if="item.service_tag" class="tag">{{item.service_tag}} </text></view>
				<view class="other substring">
					<text class="otherItem color1" v-if="item.age_text">{{item.age_text}}岁</text>
					<text class="otherItem color2" v-if="item.education_text">{{item.education_text}}</text>
					<text class="otherItem color3" v-if="item.experience_text">{{item.experience_text}}经验</text>
					<!-- <text class="otherItem" v-if="item.intention_wage">{{item.intention_wage}}</text> -->
				</view>
				<view class="resumeImg"> 
					<image class="img" :src="item.photo_img_src"></image>
					<image v-if="item.sex == 1" class="man" src="../../static/img/index/man.png"></image>
					<image v-if="item.sex == 2" class="woman" src="../../static/img/index/woman.png"></image>
				</view>
			</view>
			<view class="resumeBottom" v-if="item.intention_jobs!='' || item.intention_district != ''">
				<view class="intentionJob substring" v-if="item.intention_jobs" >
					期望职位：{{item.intention_jobs}}
				</view>
				<view class="address substring" v-if="item.intention_district">
					期望地区：{{item.intention_district}} 
				</view>
				<view class="address add2 substring" v-if="item.companyname">
					<text class="item">{{item.companyname}}</text> <text class="item">{{item.jobname}}</text>
				</view>
			</view>
		</view>
		
		<view class="resumeTag">
			<text class="tag" v-if="item.current_text">{{item.current_text}}</text>
			<text class="updateTime">
				{{ item.refreshtime }}
			</text>
		</view>
	</view>
</template>
<script>
	export default {
		props:['item'],
		computed: {
			nameClass() {
				if(this.item.high_quality && this.item.clicked){
					return 'resumeName ac isPd substring'
				} else if (this.item.high_quality) {
					return 'resumeName isPd substring'
				} else if (this.item.stick){
					return 'resumeName isPd substring'
				}else if( this.item.clicked){ 
					return 'resumeName ac substring'
				} else {
					return 'resumeName substring'
				}
			}
		},
		methods: {
			toDetail() {
				this.$emit('toDetail',this.item.id)
			},
		},
	}
</script>  
<style lang="scss" scoped>
	.resumeItem{
		position: relative;
		background: #fff;
		border-radius: 14rpx;
		margin-bottom: 18rpx;
		.resmueInfo{
			position: relative;
			.resumeInner{
				padding: 22rpx 28rpx 66rpx;
			}
			.resumeName{ 
				width: 500rpx;
				color: #2a2a2a;
				font-size:36rpx;
				font-weight: bold;
				margin-bottom: 18rpx;
				position: relative;
				// margin-left: 116rpx;
				vertical-align: middle;
				.tag{
					border: 1rpx solid #FC6502;
					color: #FC6502;
					font-size: 22rpx;
					font-weight: normal;
					border-radius: 6rpx;
					padding: 0rpx 10rpx;
					background: #FFF7F2;
					margin-left: 14rpx;
					vertical-align: middle;
					display: inline-block;
					margin-top: -6rpx;
				}
				&.isPd{
					padding-left: 30rpx;
				}
				&.ac{
					color:#797979;
				}
			}
			.highquality,
			.stick{
				width: 50rpx;
				height: 46rpx;
				position: absolute;
				left: -6rpx; 
				top: 26rpx;
				// transform: translateY(-50%);
				display: block;
			}
			// .other{
			// 	width: 500rpx;
			// 	color:#797979;
			// 	font-size: 24rpx;
			// 	// margin-left: 116rpx;
			// 	.otherItem{
			// 		font-size:24rpx;
			// 		margin-right:10rpx;
			// 		border-radius: 4rpx;
			// 		text-align: center;
			// 		padding: 4rpx 18rpx;
			// 		display: inline-block;
			// 		color: #2263E9;
			// 		font-size:24rpx;
			// 		background: #F3F6FD;
			// 	}
			// }
			
			.other{
				width: 500rpx;
				color:#797979;
				font-size: 24rpx;
				// margin-left: 116rpx;
				.otherItem{
					font-size:28rpx;
					margin-right:10rpx;
					border-radius: 6rpx;
					text-align: center;
					padding: 4rpx 18rpx;
					display: inline-block;
					color: #2263E9;
					font-size:24rpx;
					background: #F3F6FD;
					&.color1{
						color: #FF9D54;
						background: rgba(255, 157, 84,0.08);
					}
					&.color2{
						color: #AE79FF;
						background: rgba(174, 121, 255,0.08);
					}
					&.color3{
						color: #74CEA9;
						background: rgba(116, 206, 169,0.08);
					}
				}
			}
			.resumeBottom{
				// border-top: 1rpx solid #f2f2f2;
				padding: 0rpx 28rpx 26rpx;
				.intentionJob{
					max-width: 500rpx;
					color:#2a2a2a;
					font-size:30rpx; 
					background: url('../../static/img/index/collect.png') no-repeat left center;
					background-size:26rpx 22rpx;
					padding-left: 36rpx;  
					margin-bottom: 14rpx;
				}
				.address{
					max-width: 500rpx;
					color:#555555;
					font-size:30rpx;
					background: url('../../static/img/index/address.png') no-repeat left center;
					padding-left: 36rpx;
					background-size:22rpx 26rpx;
					margin-bottom: 14rpx;
					.item{
						margin-right: 30rpx;
						position: relative;
						font-size: 30rpx;
						&::after{
							content: '';
							position: absolute;
							right: -16rpx;
							top: 50%;
							transform: translateY(-50%);
							width: 4rpx;
							height: 4rpx;
							border-radius: 50%;
							background: #555555;
						}
						&:last-child::after{
							display: none;
						}
					}
					&.add2{
						margin-bottom: 0;
						background: url('../../static/img/index/job.png') no-repeat left center / 24rpx 22rpx;
					}
				}
			}
			
		}
		.resumeTag{
			padding:16rpx 26rpx 20rpx;
			border-top: 1rpx solid #f2f2f2;
			overflow: hidden;
			white-space: nowrap;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.tag{
				color:#8a8a8a;
				font-size:24rpx;
				display: inline-block;
				margin-right: 12rpx;
				padding: 8rpx 12rpx;
				background: #f9f9f9;
				border-radius: 5rpx;
				&:last-child{ 
					margin-right: 0;
				}
			}
			.updateTime{
				font-size: 24rpx;
				color: #999;
			}
		}
		.resumeImg{
			position: absolute;
			right:40rpx;
			top:40rpx;
			width:98rpx;
			height: 98rpx;
			border: 1rpx solid #f2f2f2;
			border-radius: 50%; 
			
			.man,  
			.woman{  
				width: 22rpx;
				height: 22rpx;
				display: block;
				position: absolute;
				right: 0;
				bottom: 0;
			}
			.img{
				border-radius: 50%;
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}
</style>